<template>
  <view class="content">
    <view class="top1"></view>
    <view class="top">
      <view style="width: 18rpx;height: 32rpx; margin-left: 25rpx;" @click="backBefore">
        <image src="../../static/back.png" style="width: 100%;height: 100%;"></image>
      </view>
      <view style="margin-left: 240rpx;">我的团队</view>
    </view>
    <view class="user">
      <view class="user_img"></view>
      <view class="user_txt">用户：{{ curUser.nickName }}</view>
      <view class="user_i">
        <view class="user_icon">
          <image src="../../static/light.png" style="width: 100%;height: 100%;"></image>
        </view>
        <view class="user_icon_desc">创业</view>
      </view>
    </view>
    <!-- 我的团队详细信息 -->
    <view class="team">
      <view class="my_tuijian">
        <view class="tuijian_area">
          <view class="tuijian_icon">
            <image src="../../static/tuijian_icon.png" style="width: 100%;height: 100%;"></image>
          </view>
          <view class="tuijian_txt">我的推荐人</view>
        </view>
        <view class="tuijian_info">
          <view class="up_people">
            <image src="../../static/up_people.png" style="width: 100%;height: 100%;"></image>
          </view>
          <view style="font-size: 34rpx;font-weight: 550;margin-left: 20rpx;">{{ curUser.parentName }}</view>
          <view style="width: 82rpx;height: 28rpx;margin-left: 10rpx;">
            <image src="../../static/tuijr.png" style="width: 100%;height: 100%;"></image>
          </view>
        </view>
      </view>

      <!-- 我的下级 -->
      <view class="tuijian_area">
        <view class="tuijian_icon">
          <image src="../../static/tuijian_icon.png" style="width: 100%;height: 100%;"></image>
        </view>
        <view class="tuijian_txt">我的下级</view>
        <view style="font-size: 34rpx;font-weight: 550;margin-left: 20rpx;color: red;">30</view>
      </view>

      <!--官方卡片-->
      <view>
        <view @click="guanfangClick">
          <!-- 官方收起 -->
          <view v-if="guanfangExt">
            <view class="guanfang">
              <view style="width: 14rpx;height: 14rpx;margin-top: 30rpx;margin-left: 10rpx;">
                <image src="../../static/sanjiao.png" style="width: 100%;height: 100%;"></image>
              </view>
              <view
                  style="font-size: 36rpx;font-weight: 500;margin-top: 30rpx;margin-left: 30rpx;color: red">
                官方
              </view>
              <view style="font-size: 30rpx;margin-top: 36rpx;margin-left: 510rpx;">4</view>
            </view>
          </view>
          <view v-if="!guanfangExt">
            <!-- 官方展开 -->
            <view class="guan">
              <view class="guanfang_desc">
                <view style="width: 14rpx;height: 14rpx;margin-top: 30rpx;margin-left: 10rpx;">
                  <image src="../../static/sanjiaoxia.png" style="width: 100%;height: 100%;"></image>
                </view>
                <view
                    style="font-size: 36rpx;font-weight: 500;margin-top: 30rpx;margin-left: 30rpx;color: red">
                  官方
                </view>
                <view style="font-size: 30rpx;margin-top: 36rpx;margin-left: 510rpx;">4</view>
              </view>
              <view v-for="(item, index) in goodsList" :key="item.id">
                <view class="guanfang_info">
                  <view style="width: 72rpx;height: 72rpx;margin-left: 10rpx;">
                    <image src="../../static/guanfang_user.png" style="width: 100%;height: 100%;">
                    </image>
                  </view>
                  <view style="font-size: 36rpx;font-weight: 500;margin-left: 30rpx;color: black">用户名
                  </view>
                  <view style="width:72rpx; height: 28rpx;margin-left: 10rpx;">
                    <image src="../../static/guanfang_icon.png" style="width: 100%;height: 100%;">
                    </image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--官方卡片-->

      <!--创业卡片-->
      <view>
        <view @click="chuangyeClick">
          <!-- 创业收起 -->
          <view v-if="chuangyeExt">
            <view class="guanfang">
              <view style="width: 14rpx;height: 14rpx;margin-top: 30rpx;margin-left: 10rpx;">
                <image src="../../static/sanjiao.png" style="width: 100%;height: 100%;"></image>
              </view>
              <view
                  style="font-size: 36rpx;font-weight: 500;margin-top: 30rpx;margin-left: 30rpx;color: blue">
                创业
              </view>
              <view style="font-size: 30rpx;margin-top: 36rpx;margin-left: 510rpx;">4</view>
            </view>
          </view>
          <view v-if="!chuangyeExt">
            <!-- 创业展开 -->
            <view class="guan">
              <view class="guanfang_desc">
                <view style="width: 14rpx;height: 14rpx;margin-top: 30rpx;margin-left: 10rpx;">
                  <image src="../../static/sanjiaoxia.png" style="width: 100%;height: 100%;"></image>
                </view>
                <view
                    style="font-size: 36rpx;font-weight: 500;margin-top: 30rpx;margin-left: 30rpx;color: blue">
                  创业
                </view>
                <view style="font-size: 30rpx;margin-top: 36rpx;margin-left: 510rpx;">4</view>
              </view>
              <view v-for="(item, index) in goodsList" :key="item.id">
                <view class="guanfang_info">
                  <view style="width: 72rpx;height: 72rpx;margin-left: 10rpx;">
                    <image src="../../static/guanfang_user.png" style="width: 100%;height: 100%;">
                    </image>
                  </view>
                  <view style="font-size: 36rpx;font-weight: 500;margin-left: 30rpx;color: black">用户名
                  </view>
                  <view style="width:72rpx; height: 28rpx;margin-left: 10rpx;">
                    <image src="../../static/chuangye_icon.png" style="width: 100%;height: 100%;">
                    </image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--创业卡片-->
    </view>

  </view>
</template>

<script>
import config from '../../utils/config.js'

export default {
  data() {
    return {
      showOverlay: false, // 控制遮罩层显示的变量
      chuangyeExt: true,
      guanfangExt: true,
      goodsList: ['1'],
      curUser: null
    }
  },
  created() {
    this.checkLogin()
  },
  methods: {
    checkLogin() {
      try {
        const token = uni.getStorageSync('token');
        if (!token) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        } else {
          // todo 需要将缓存中的json串转成对象
          this.curUser = JSON.parse(uni.getStorageSync('user'));
          console.info("2222", this.curUser)
        }
      } catch (e) {
        // error
      }
    },
    getUserInfo() {
      uni.request({
        url: config.apiUrl + '/app/login',
        method: "POST",
        data: this.loginParams,
        success: (res) => {
          res = res.data;
          if (200 == res.code) {
            console.info(res)
            uni.setStorageSync('token', res.token);
            uni.navigateBack({
              delta: 1
            });
          } else {
            console.error('登录失败');
          }
        }
      });
    },
    guanfangClick() {
      this.guanfangExt = !this.guanfangExt;
    },
    chuangyeClick() {
      this.chuangyeExt = !this.chuangyeExt;
    },
    login() {
      uni.navigateTo({
        url: '/pages/login/login?id=zhangsan'
      });
    },
    toggleOverlay() {
      this.showOverlay = !this.showOverlay;
    },
    closed() {
      this.showOverlay = !this.showOverlay;
    },
    backBefore() {
      uni.navigateBack({
        delta: 1 // 默认值是1，表示返回的页面层数
      });
    }
  }
}
</script>

<style>
.content {
  background-color: #FFFFFF;
  height: 100%;
  /* 确保背景色覆盖整个页面 */
  width: 100%;
  /* 确保背景色覆盖整个页面 */
  position: absolute;
}

.top1 {
  height: 40rpx;
  background-image: linear-gradient(to right, #fdd706, #fdb932);
}

.top {
  height: 88rpx;
  background-image: linear-gradient(to right, #fdd706, #fdb932);
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 32rpx;
  font-weight: 600;
}

.user {
  height: 200rpx;
  /**渐变色背景**/
  background-image: linear-gradient(to right, #fdd706, #fdb932);
  display: flex;
  align-items: center;
}

.user_img {
  height: 122rpx;
  width: 122rpx;
  margin-left: 28rpx;
  /** border: solid 1rpx red; **/
}

.user_txt {
  height: 122rpx;
  width: 400rpx;
  margin-left: 28rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 34rpx;
  font-weight: 542;
}

.user_i {
  height: 122rpx;
  width: 64rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-left: 40rpx;
}

.user_icon {
  height: 64rpx;
  width: 64rpx;
}

.user_icon_desc {
  font-size: 26rpx;
  font-weight: 800;
}

.team {
  height: 1012rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
}

.my_tuijian {
  /** border: solid 1rpx red;**/
  padding-top: 10rpx;
}

.tuijian_area {
  display: flex;
  align-items: center;
  padding-top: 25rpx;
  padding-bottom: 25rpx;
  margin-left: 25rpx;
  margin-right: 25rpx;
}

.tuijian_icon {
  width: 8rpx;
  height: 34rpx;
}

.tuijian_txt {
  font-size: 30rpx;
  font-weight: 600;
  margin-left: 20rpx;
}

.tuijian_info {
  height: 120rpx;
  border-radius: 10rpx;
  margin-left: 25rpx;
  margin-right: 25rpx;
  background-image: linear-gradient(to right, #fdd706, #fdb932);
  display: flex;
  align-items: center;
}

.up_people {
  width: 76rpx;
  height: 86rpx;
  margin-left: 20rpx;
}

.guan {
  background-color: #FFFFFF;
}

.guanfang {
  width: 700rpx;
  height: 120rpx;
  margin-top: 10rpx;
  border-radius: 10rpx;
  border: solid 1rpx #d6d6d6;
  margin-left: 25rpx;
  display: flex;
}

.guanfang_desc {
  width: 700rpx;
  height: 120rpx;
  margin-top: 10rpx;
  border-radius: 10rpx;
  border: solid 1rpx #d6d6d6;
  margin-left: 25rpx;
  display: flex;
}

.guanfang_info {
  width: 700rpx;
  height: 120rpx;
  margin-top: 1rpx;
  margin-left: 25rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: solid 1rpx #d6d6d6;
  border-left: solid 1rpx #d6d6d6;
  border-right: solid 1rpx #d6d6d6;
}
</style>
